<template>
  <div v-loading="loading">
    <!-- <i-form
        ref="form"
        class="timecard-deatail-form"
        :items="formItems"
        :rules="rules"
        :model="form"
        :inline="true"
        :layout-span="24"
        :default-span="6"
        :label-width="150"
      >
        <template v-if="this.form.type === 4" slot="bindingAct">
          <el-form-item label="绑定活动:">
            <a>{{ this.form.actName }}</a>
          </el-form-item>
        </template>
      </i-form> -->
    <DetailPanel :dataSource="form" :columns="formItems" :buttons="buttons">
      <template slot="header">
        {{ title }}
      </template>
      <template slot="bindingAct">
        <el-form-item label="绑定活动:">
          <a :href="`${this.form.actId}`">{{ this.form.actName }}</a>
        </el-form-item>
      </template>
    </DetailPanel>

    <!-- <div class="timecard-deatail-clear_card">
        <el-button
          v-if="
            resourceSet.includes(
              '/web/order-management/timecard-order-management/timecard-detail/时长卡清零'
            )
          "
          @click="handleClearTimecard"
          type="warning"
          >时长清零</el-button
        >
      </div> -->
    <!-- <div v-if="$route.params.type === 'order'" class="panel">
      <div class="panel-header">{{ $route.meta.title || '' }}</div>
        <i-form
          ref="orderForm"
          class="advert-form"
          :items="orderFormItems"
          :rules="orderRules"
          :model="orderForm"
          :inline="true"
          :layout-span="24"
          :default-span="6"
          :label-width="150"
        >
        </i-form>
    </div> -->
    <div class="panel">
      <div class="panel-header">使用情况</div>
      <TableSearch
        ref="tableSearch"
        :columns="orderColumns"
        :tableData="tableData"
        @handleTableData="handleTableData"
        :pageNameDisplay="false"
      />
    </div>
  </div>
</template>
<script>
import DetailPanel from '@/components/DetailPanel'
import formatter, { typeMap } from '@/utils/format'
import { timeCardDetail, resetTimeCardRestTime } from '@/api/order'
import TableSearch from '@/components/TableSearch'
import dayjs from 'dayjs'

export default {
  name: 'OrderTimeCardDetail',
  components: { TableSearch, DetailPanel },
  computed: {
    resourceSet() {
      return this.$store.getters.resourceSet
    },
    title() {
      if (this.$route.params.type === 'order') {
        return `时长卡券码: ${this.$route.params.id || '-'}`
      } else {
        return '时长卡详情'
      }
    },
  },
  data() {
    return {
      loading: false,
      loaded: false,
      formItems: [],
      rules: {},
      form: {},
      buttons: [
        {
          label: '时长清零',
          click: this.handleClearTimecard,
          type: 'warning',
          resourceId:
            '/web/order-management/timecard-order-management/timecard-detail/时长卡清零',
        },
      ],
      orderFormItems: [
        {
          label: '用户手机号',
          value: 'userMobile',
          type: 'detail',
        },
        {
          label: '剩余时长(分钟)',
          value: 'restTime',
          type: 'detail',
        },
        {
          label: '包含时长(小时)',
          value: 'initialTime',
          type: 'detail',
        },
        {
          label: '过期时间',
          value: 'bindingExpireTime',
          type: 'detail',
          formatter: () => {
            if (!this.form.expireTime) return '无限'
            return dayjs(this.form.expireTime).format('YYYY-MM-DD HH:mm:ss')
          },
        },
        {
          label: '订单时间',
          value: 'createTime',
          type: 'detail',
          formatter: () => {
            if (this.form.createTime) {
              return dayjs(this.form.createTime).format('YYYY-MM-DD HH:mm:ss')
            }
            return '/'
          },
        },
        {
          label: '绑定电站',
          value: 'actId',
          type: 'detail',
          formatter: () => {
            return !this.form.actId && !this.form.stationId
              ? this.form.merchantName +
                  '旗下' +
                  (this.form.stationIds ? '部分' : '所有') +
                  '电站'
              : this.form.stationName
          },
        },
        // {
        //   label: '绑定活动:',
        //   value: 'actName',
        //   type: 'detail'
        // },
        {
          slot: 'bindingAct',
          ifRender: () => {
            return (
              this.form.type === typeMap.timeCardType[4] &&
              this.form.actId !== null
            )
          },
        },
        {
          label: '所属代理商',
          value: 'merchantName',
          type: 'detail',
        },
        {
          label: '优惠券抵扣(元)',
          value: 'voucherMoney',
          type: 'text',
          ifRender: () => {
            return this.form.voucherMoney || this.form.voucherMoney === 0
          },
        },
        {
          label: '第三方支付金额(元)',
          value: 'money',
          type: 'detail',
        },
        {
          label: '时长卡类型',
          value: 'userMobile',
          type: 'detail',
          formatter: () => {
            let str = ''
            if (this.actId && this.stationId) str += '(通用)'
            return (str += typeMap.timeCardType[this.form.type])
          },
        },
      ],
      orderRules: {},
      exchangeFormItems: [
        {
          label: '时长卡券码：',
          value: 'integralId',
          type: 'detail',
        },
        {
          label: '剩余时长（分钟）：',
          value: 'restTime',
          type: 'detail',
        },
        {
          label: '包含时长（小时）：',
          value: 'initialTime',
          type: 'detail',
        },
        {
          label: '状态：',
          value: '',
          type: 'detail',
          formatter: () => {
            return '/'
          },
        },
        {
          label: '绑定电站：',
          value: 'stationName',
          type: 'detail',
        },
        {
          label: '所属代理商：',
          value: 'merchantName',
          type: 'detail',
        },
        {
          label: '可兑换区域：',
          value: 'nationName',
          type: 'detail',
        },
      ],
      exchangeRules: {},
      // columns: [],
      orderColumns: [
        {
          label: '订单号',
          prop: 'consumeBillNum',
          resourceId:
            '/web/order-management/timecard-order-management/timecard-detail/订单号',
        },
        {
          label: '开始充电时间', // to-fixed
          // prop: 'createTime',
          prop: 'chargeStartTime',
          formatter,
          resourceId:
            '/web/order-management/timecard-order-management/timecard-detail/开始充电时间',
        },
        {
          label: '充电时长',
          prop: 'chargeDuration',
          resourceId:
            '/web/order-management/timecard-order-management/timecard-detail/充电时长',
        },
        {
          label: '抵扣时长',
          prop: 'timeCardConsume',
          resourceId:
            '/web/order-management/timecard-order-management/timecard-detail/抵扣时长',
        },
        {
          label: '支付状态',
          prop: 'payStatus',
          formatter,
          resourceId:
            '/web/order-management/timecard-order-management/timecard-detail/支付状态',
        },
      ],
      tableData: {},
    }
  },
  methods: {
    handleClearTimecard() {
      this.$confirm('确定要清零时长吗？', '时长清零', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      }).then(() => {
        resetTimeCardRestTime({
          integralId: this.$route.params.id,
        })
          .then(() => {
            this.$message({
              message: '清零成功',
              showClose: true,
              type: 'success',
            })

            this.$refs.tableSearch.refreshTable()
          })
          .catch((err) => {
            console.log(err)
          })
      })
    },
    handleTableData(params) {
      if (this.$route.params.type === 'order') {
        this.loading = true
        timeCardDetail({
          ...params,
          integralId: this.$route.params.id,
        })
          .then((res) => {
            this.form = res
            this.formItems = this.orderFormItems

            this.tableData = {
              list: res?.timecardLogVos.list,
              totalCount: res?.timecardLogVos.totalAmount,
            }

            // this.columns = this.orderColumns
            this.loaded = true
          })
          .catch((err) => {
            console.log(err)
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
  },
}
</script>
<style lang="scss">
.timecard-deatail-form {
  padding-left: 20px;
  .el-form-item__content {
    span {
      color: #988ca4;
    }
  }
}

.timecard-deatail-clear_card {
  padding-left: 20px;
}
</style>
